<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<% String path = request.getContextPath();
    request.setAttribute("path", path);%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/login2.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="/css/login2.css"/>
</head>
<body>
<%--是否是登陆失败跳转回来--%>
<script type="text/javascript">
    <c:if test="${loginmsg!=null}">
    window.onload = function (ev) {
        alert(${loginmsg})
    }
    </c:if>
</script>


<div id="live2d-widget">
    <canvas id="live2dcanvas">
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
    L2Dwidget.init({
        "model": {
            jsonPath: "https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json",//这里改模型，前面后面都要改
            "scale": 1
        },
        "display": {
            "position": "left",//设置看板娘的上下左右位置
            "width": 200,
            "height": 500,
            "hOffset": 70,
            "vOffset": 70
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,//设置透明度
            "opacityOnHover": 0.2
        }
    });
    window.onload = function () {
        $("#live2dcanvas").attr("style", "position: fixed; opacity: 0.7; right: 70px; bottom: 0px; z-index: 1; pointer-events: none;")
    }
</script>


<div id="login">
    <div id="login_title">
        <span id="jdmc">王府井永光酒店</span>
        <a href="/utils/forward/index/5"><img src="/img/fangzi.png" width="31px"/><span>首页</span></a>
    </div>
    <div id="img">
        <img src="/img/login001.jpg" style="height: 600px"/>

        <c:choose>
        <c:when test="${isLogin==1}">
        <span id="img_content" style="height: 550px">
                </c:when>
             <c:otherwise>
        <span id="img_content" style="height: 250px;top:216px">
            </c:otherwise>
            </c:choose>




        <c:choose>
           <c:when test="${isLogin==1}">

                <form action="/jd/register" method="post" enctype="multipart/form-data"
                      id="formRegister" onsubmit="return checkField()">
                <table cellpadding="20px">
                    <tr>
                        <td colspan="2" id="img_content_zc">
									<span>
										注册
									</span>
                            <a href="/utils/forwardToLogin/login?isLogin=0">去登录……</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="fistTr">
                           <font color="red">*</font> <label for="username">用户名：</label>
                        </td>
                        <td class="sTr">
                            <input id="username" type="text" name="username" onblur="aaa()"/>
                            <img id="usernameErr" style="display: none"/>
                        </td>
                    </tr>
                       <tr><td>${ljj}</td></tr>





                    <tr>
                        <td class="fistTr">
                            <font color="red">*</font><label for="password">密码：</label>
                        </td>
                        <td class="sTr">
                            <input id="password" onblur="isPwd()" type="password" name="password"/>
                            <img id="passwordErr" style="display: none"/>
                        </td>
                    </tr>
                     <tr>
                        <td class="fistTr">
                            <font color="red">*</font><label for="repassword">重复密码：</label>
                        </td>
                        <td class="sTr">
                            <input id="repassword" onblur="isCom()" type="password" name="repassword"/>
                            <img id="repasswordErr" style="display: none"/>
                        </td>
                    </tr>

<tr>
                        <td class="fistTr">
                            <font color="red">*</font><label for="varifyCode">验证码：</label>
                        </td>
                         <td>
                            <input type="text" class="varifyCode" onblur="varifyCodetextBlur()" maxlength="4"
                                   name="varifyCode" id="varifyCode">
                            <img src="/utils/varifyCode" onclick="changeCode();" id="code" class="varifyCodeimg"/>
                             <img id="varifyCodeErr" style="display: none"/>
                         </td>
                    </tr>




                    <tr>
                        <td class="fistTr">
                            <font color="red">*</font><label for="name">真实姓名：</label>
                        </td>
                        <td class="sTr"><input id="name" type="text" name="name"/>
                            <img id="nameErr" style="display: none"/>
                        </td>
                    </tr>

                    <tr>
                        <td class="fistTr">性别：</td>
                        <td class="sTr">
                            <input type="radio" name="sex" value="man" checked="checked" id="man"/><label
                                for="man">男</label>
                            <input type="radio" name="sex" value="woman" id="woman"/><label for="woman">女</label>
                        </td>
                    </tr>
                    <tr>
                        <td class="fistTr">
                            <font color="red">*</font><label for="email">email：</label></td>
                        <td class="sTr"><input type="text" id="email" name="email"/>
                            <img id="emailErr"/>
                        </td>
                    </tr>

                    <tr>
                        <td class="fistTr">
                           <font color="red">*</font> <label for="phone">电话号码：</label>
                        </td>
                        <td class="sTr"><input type="text" id="phone" name="phone"/>
                            <img id="phoneErr"/>
                        </td>
                    </tr>

                    <tr>
                        <td class="fistTr">
                            <label for="via">头像：</label>
                        </td>
                        <td class="sTr">
                            <label for="via" id="vialabel" style="cursor:pointer;text-decoration: none">添加头像</label>
                            <img id="viaErr"/>
                            <input type="file" onchange="fileChecked()" style="padding-top: 25px;display: none"
                                   id="via" name="imgFile"/>
                        </td>
                    </tr>





                    <tr>
                        <td colspan="2">

                        </td>
                    </tr>

                    <tr>
                        <td colspan="2">
                            <input type="submit" value="注册" id="button_zc"/>
                            <input type="reset" value="清空" onclick="reser()" id="button_qk"/>
                        </td>
                    </tr>
                </table>
            </form>
           </c:when>
           <c:otherwise>

                 <form action="/jd/login" method="post" enctype="application/x-www-form-urlencoded"
                       id="formLogin" onsubmit="return dl_checkField()">
                    <table cellpadding="20px">
                        <tr>
                            <td colspan="2" id="dl_img_content_zc">
                                        <span>
                                            登录<font color="red">${loginmsg}</font>
                                        </span>
                                <a href="/utils/forwardToLogin/login?isLogin=1">去注册……</a>
                            </td>
                        </tr>
                        <tr>
                            <td class="fistTr">
                                <label for="dl_username">用户名：</label>
                            </td>
                            <td class="sTr">
                                <input id="dl_username" type="text" name="dl_username"/>
                                <img id="dl_usernameErr">
                            </td>
                        </tr>

                        <tr>
                            <td class="fistTr">
                                <label for="dl_password">密码：</label>
                            </td>
                            <td class="sTr">
                                <input id="dl_password" type="password" name="dl_password"/>
                                <img id="dl_passwordErr">
                            </td>
                        </tr>

                        <tr>
                            <td colspan="2" align="center">
                                <input type="submit" value="登录" id="dl_login"/>
                            </td>
                        </tr>
                    </table>
                </form>
           </c:otherwise>
        </c:choose>


    </div>
</div>

<div id="login_foot">
    <img src="/img/yejiao2.png"/>
</div>
</div>

</body>
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/loginOrRegiester.js" type="text/javascript"></script>
<script type="text/javascript">
    //密码校验
    function isPwd() {

        var text = $("#password")[0].value;
        var err = $("#passwordErr")[0];
        err.setAttribute('style', 'display:none');
        var re = /^(?=.*[a-z])(?=.*\d)[^]{6,16}$/;
        var result = re.test(text);

        if (!result) {
            err.setAttribute("src", "/img/warning.png")
            err.setAttribute("title", "密码必须包含数字,字母,6到16位之间");
            err.setAttribute('style', 'color:red;font-size:x-small;width:20px;height:20px');
            return false;
        } else {
            err.setAttribute("src", "/img/ok.png")
            err.setAttribute("title", "密码可以使用");
            err.setAttribute('style', 'color:red;font-size:x-small;width:20px;height:20px');
            return true;
        }
    };

    //确认密码
    function isCom() {
        var text1 = $("#password")[0].value;
        var text2 = $("#repassword")[0].value;
        var err = $("#repasswordErr")[0];
        err.setAttribute('style', 'display:none');
        var re = /^(?=.*[a-z])(?=.*\d)[^]{6,16}$/;
        var result = re.test(text1);

        if (!result) {
            err.setAttribute("src", "/img/warning.png")
            err.setAttribute("title", "密码必须包含数字,字母,6到16位之间");
            err.setAttribute('style', 'color:red;font-size:x-small;width:20px;height:20px');
            return false;
        }


        if (text2 == text1) {
            err.setAttribute("src", "/img/ok.png")
            err.setAttribute("title", "密码效验无误");
            err.setAttribute('style', 'color:red;font-size:x-small;width:20px;height:20px');
            return true;
        } else {
            err.setAttribute("src", "/img/warning.png")
            err.setAttribute("title", "两次输入的密码不一致");
            err.setAttribute('style', 'color:red;font-size:x-small;width:20px;height:20px');
            return false;
        }
    }

    function fileChecked() {
        var reg = /\.(png|jpg|gif|jpeg|webp)$/;

        var fileObj = $("#via")[0];
        var fileEle = fileObj.files[0];
        console.log(fileEle)
        var name = fileEle.name;

        var originalsize = fileEle.size / 1024 / 1024;   //byte=>mb
        var size = originalsize.toFixed(2); //取后两位

        var errElement = $("#viaErr")[0];
        if (reg.test(name)) {
            if (size > 0.1 && size < 10.0) {
                errElement.setAttribute("src", "/img/ok.png")
                errElement.setAttribute("title", "图片名称:" + name + "\r\n图片大小:" + size + "mb");
                errElement.setAttribute('style', 'color:green;font-size:x-small;width:20px;height:20px');
                $("#vialabel")[0].value = "已上传"
            } else {
                errElement.setAttribute("src", "/img/warning.png")
                errElement.setAttribute("title", "上传图片大小请控制在10mb以内100kb以上");
                errElement.setAttribute('style', 'color:red;font-size:x-small;width:20px;height:20px');
                fileObj.outerHTML = fileObj.outerHTML;
            }


        } else {

            errElement.setAttribute("src", "/img/warning.png")
            errElement.setAttribute("title", "上传图片后缀应为\'png|jpg|gif|jpeg|webp\'");
            errElement.setAttribute('style', 'color:red;font-size:x-small;width:20px;height:20px');

            fileObj.outerHTML = fileObj.outerHTML;
        }

    }

    function reser() {
        var usernameErr = $("#usernameErr")[0];
        var nameErr = $("#nameErr")[0];
        var passwordErr = $("#passwordErr")[0];
        var repasswordErr = $("#repasswordErr")[0];
        var phoneErr = $("#phoneErr")[0];
        var emailErr = $("#emailErr")[0];
        var viaErr = $("#viaErr")[0];
        var varifyCodeErrElement = $("#varifyCodeErr")[0];

        usernameErr.setAttribute('style', 'display:none');
        nameErr.setAttribute('style', 'display:none');
        passwordErr.setAttribute('style', 'display:none');
        repasswordErr.setAttribute('style', 'display:none');
        phoneErr.setAttribute('style', 'display:none');
        emailErr.setAttribute('style', 'display:none');
        viaErr.setAttribute('style', 'display:none');
        $("#vialabel")[0].value = "请添加头像";
        varifyCodeErrElement.setAttribute('style', 'display:none');

    }

    function checkField() {
        reser();
        var flag = isPwd() && isCom();
        var that = this


        var varifyCode = $("#varifyCode")[0].value.trim();

        if (varifyCode == undefined || varifyCode.length < 4) {
            flag = checkingVarifyCode("false")
            flag = false
        } else {


            var xhr = new XMLHttpRequest()
            var url = "/utils/checkingVarifyCode?varifyCode=" + varifyCode
            xhr.open('get', url, false) // 同步请求
            // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            xhr.send(null)
            var res = JSON.parse(xhr.responseText)


            flag = checkingVarifyCode(res + "")

            // $.ajax({
            //     type: "get",
            //     url: "/utils/checkingVarifyCode?varifyCode=" + varifyCode,
            //     // data:"",
            //     dataType: "text",
            //     async:false,
            //     // contentType:false,
            //     cache: false,
            //     // processData:false,
            //     success: function (data) {
            //         // that.flag = data=="true"?"true":"false"
            //         flag = checkingVarifyCode(data)
            //     },
            //     error: function (err) {
            //         alert("出错了，请联系管理员")
            //         console.log(err)
            //     }
            // });
        }


        var formRegister = $("#formRegister")
        var form = new FormData(formRegister[0]);

        var username = form.get("username").trim();
        var name = form.get("name").trim();
        var sex = form.get("sex").trim();
        var email = form.get("email").trim();
        var phone = form.get("phone").trim();
        var re = /[^\u4e00-\u9fa5]/;   //非中文正则
        var emailPat = /^(.+)@(.+)$/;     //email效验
        var usernameregx = /^[\u4e00-\u9fa50-9A-Za-z]{1,8}$/;  // 中英文
        // 规则对象(flag)
        // var usernameregx = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]*")
        var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;   //手机号效验


        var usernameErr = $("#usernameErr")[0];
        var nameErr = $("#nameErr")[0];
        // var passwordErr = $("#passwordErr")[0];
        // var repasswordErr = $("#repasswordErr")[0];
        var phoneErr = $("#phoneErr")[0];
        var emailErr = $("#emailErr")[0];
        // var viaErr = $("#viaErr")[0];
        // var varifyCodeErrElement = $("#varifyCodeErr")[0];


        if (!usernameregx.test(username)) {
            flag = false;
            usernameErr.setAttribute("src", "/img/warning.png")
            usernameErr.setAttribute("title", "用户名在1-8字符内，且不能包含特殊字符");
            usernameErr.setAttribute('style', 'color:red;font-size:x-small;width:20px;height:20px');
        } else {
            //todo
            var flag2;
            $.ajax({
                url: "/jd/userRepeat?username=" + username,

                async: false,
                dataType: 'json',
                success: function (data) {
                    alert(data.data)
                },
                error: function (err) {
                    var responseText = err.responseText;
                    if (responseText == "ok") {
                        flag2 = true;
                    } else {
                        flag2 = false;
                    }

                }


            })
            if (flag2) {
                usernameErr.setAttribute("src", "/img/ok.png")
                usernameErr.setAttribute("title", "用户名可用");
                usernameErr.setAttribute('style', 'color:red;font-size:x-small;width:20px;height:20px');
            } else {
                flag = false;
                usernameErr.setAttribute("src", "/img/warning.png")
                usernameErr.setAttribute("title", "用户名重复");
                usernameErr.setAttribute('style', 'color:red;font-size:x-small;width:20px;height:20px');
            }

        }


        if (re.test(name)) {
            flag = false;
            nameErr.setAttribute("src", "/img/warning.png")
            nameErr.setAttribute("title", "姓名请输入中文");
            nameErr.setAttribute('style', 'color:red;font-size:x-small;width:20px;height:20px');
        } else {
            nameErr.setAttribute("src", "/img/ok.png")
            nameErr.setAttribute("title", "姓名验证成功");
            nameErr.setAttribute('style', 'color:red;font-size:x-small;width:20px;height:20px');
        }

        if (name.length > 5 || name.length < 2) {
            flag = false;
            nameErr.setAttribute("title", "姓名长度在2~5之间");
            nameErr.setAttribute("src", "/img/warning.png");
            nameErr.setAttribute('style', 'color:red;font-size:x-small;width:20px;height:20px');
        } else {
            nameErr.setAttribute("src", "/img/ok.png")
            nameErr.setAttribute("title", "姓名验证成功");
            nameErr.setAttribute('style', 'color:red;font-size:x-small;width:20px;height:20px');
        }

        var matchArray = email.match(emailPat);
        if (matchArray == null) {
            emailErr.setAttribute("src", "/img/warning.png");
            emailErr.setAttribute("title", "电子邮件地址必须包括 ( @ 和 . )");
            emailErr.setAttribute("style", "color:red;font-size:x-small;width:20px;height:20px")
            flag = false;
        } else {
            emailErr.setAttribute("src", "/img/ok.png")
            emailErr.setAttribute("title", "电子邮件地址验证成功");
            emailErr.setAttribute('style', 'color:red;font-size:x-small;width:20px;height:20px');
        }


        if (!myreg.test(phone)) {
            flag = false;
            phoneErr.setAttribute("src", "/img/warning.png");
            phoneErr.setAttribute("title", '手机号格式不正确');
            phoneErr.setAttribute("style", "color:red;font-size:x-small;width:20px;height:20px;")
        } else {
            phoneErr.setAttribute("src", "/img/ok.png")
            phoneErr.setAttribute("title", "手机号格式验证成功");
            phoneErr.setAttribute('style', 'color:red;font-size:x-small;width:20px;height:20px');
        }


        // var flage2 = checkingObjectErr();

        // return flag&&flage2;
        //  for (let i = 0; i < 10000; i++) {
        //      console.log(11);console.log(11);console.log(11)
        //  }


        if (flag) {
            alert("验证通过");
            return true;
        } else {
            alert("验证失败");
            return false;
        }

        // return flag=="true"?true:false


        // if(flag){
        //     alert("验证通过")
        //     return true
        // }
        // return flag;
    }


    function varifyCodetextBlur() {

        var varifyCode = $("#varifyCode")[0].value.trim();
        alert(varifyCode)
        if (varifyCode == undefined || varifyCode.length < 4) {
            checkingVarifyCode("false")

        } else {


            // var xhr = new XMLHttpRequest()
            // var url = "/utils/checkingVarifyCode?varifyCode=" + varifyCode
            // xhr.open('post', url, false) // 同步请求
            // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            // xhr.send('platform=' + platform)
            // var res = JSON.parse(xhr.responseText)
            // var body = res.body;
            // debugger
            // console.log("res"+res)
            // console.log("resbody"+body)
            // checkingVarifyCode(body)


            $.ajax({
                type: "get",
                url: "/utils/checkingVarifyCode?varifyCode=" + varifyCode,
                // data:"",
                dataType: "text",
                async: false,
                // contentType:false,
                cache: false,
                // processData:false,
                success: function (data) {

                    checkingVarifyCode(data)
                },
                error: function (err) {

                    console.log(err)

                }
            });
        }
    }


    function checkingVarifyCode(url) {

        var varifyCodeErrElement = $("#varifyCodeErr")[0];
        if (url == "false") {
            varifyCodeErrElement.setAttribute("title", "验证码不正确");
            varifyCodeErrElement.setAttribute("src", "/img/warning.png");
            varifyCodeErrElement.setAttribute('style', 'color:red;font-size:x-small;width:20px;height:20px;padding-left: 4px;');
            return false
        } else {
            varifyCodeErrElement.setAttribute("title", "验证码正确");
            varifyCodeErrElement.setAttribute("src", "/img/ok.png");
            varifyCodeErrElement.setAttribute('style', 'color:red;font-size:x-small;width:20px;height:20px;padding-left: 4px;');
            return true
        }
    }


    function changeCode() {
        document.getElementById("code").src = "/utils/varifyCode";
    }

    function aaa() {
        console.log("aaa");
        // alert("进了")
        var username = document.getElementById("username").value;
        // alert("进了")
        $.ajax({
            url: "/jd/cklogin?username=" + username,
            async: false,
            dataType: 'json',
            success: function (data) {
                debugger
                alert(data.data.ljj)
            },
            error: function (err) {
                debugger
                var responseText = err.responseText;
                if (responseText == "ok") {
                    flag2 = true;
                } else {
                    flag2 = false;
                }

            }
        })
    }


    function dl_checkField() {


        var err = $("#dl_passwordErr")[0]
        var formLogin = $("#formLogin")
        var form = new FormData(formLogin[0]);
        //简单的表单效验
        var username = form.get("dl_username").trim();
        var password = form.get("dl_password").trim();
        var usernameregx = /^[\u4e00-\u9fa50-9A-Za-z]{1,8}$/;  // 中英文
        var pwdregx = /^(?=.*[a-z])(?=.*\d)[^]{6,16}$/;
        var result = pwdregx.test(password);

        if (result && usernameregx.test(username)) {
            //发送ajax 给后台效验
            return true;
            // return true;
            // return false
        } else {
            err.setAttribute("src", "/img/warning.png")
            err.setAttribute("title", "用户名或密码有误，请重新输入");
            err.setAttribute('style', 'color:red;font-size:x-small;width:20px;height:20px');
            return false;
        }

    }


</script>
</html>
